<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main" />
    <gui:resources components="['draggableList']"/>
    <title>DraggableList Demo</title>
    <style>
    div.workarea {
        padding: 10px;
        float: left
    }

    ul.draglist {
        position: relative;
        width: 200px;
        list-style: none;
        margin: 0;
        padding: 0;
        /*
           The bottom padding provides the cushion that makes the empty
           list targetable.  Alternatively, we could leave the padding
           off by default, adding it when we detect that the list is empty.
        */
        padding-bottom: 20px;
    }

    ul.draglist li {
        margin: 1px;
        cursor: move;
    }

    li.list1 {
        background-color: #D1E6EC;
        border: 1px solid #7EA6B2;
    }

    li.list2 {
        background-color: #D8D4E2;
        border: 1px solid #6B4C86;
    }

    li.list3 {
        background-color: #27D6E3;
        border: 1px solid #95C8CC;
    }

    li.list4 {
        background-color: #779457;
        border: 1px solid #413170;
        color: #FFF;
    }

    </style>
</head>

<body>

    <h1>Drag and Drop Demos</h1>

    <g:form name="myForm" update="updateMe"
            url="[ controller: 'demo', action: 'acceptForm']">
            
            <p/>This input is here because it has an id that is the same as one of the ids sent into the draggable list.  The list can be sent a prepend string to prepend all its ids, and this is a test of that.
            <br/>
            <input type='text' id='a1' name='a1' value='My id is a1' />

        <gui:draggableListWorkArea formReady="true">

            <gui:draggableList id="myList1" class="list1" prepend="list_">
                <li id="a1">A:1</li>
                <li id="a2">A:2</li>
                <li id="a3">A:3</li>
                <li id="a4">A:4</li>
            </gui:draggableList>

            <gui:draggableList id="myList2" class="list2">
                <li>B:1</li>
                <li>B:2</li>
                <li>B:3</li>
                <li>B:4</li>
            </gui:draggableList>

        </gui:draggableListWorkArea>
        <br clear="left"/>
        <br/>
        <button type="submit">Submit List Data</button>
    </g:form>

</body>

</html>